<template>
  <div>
    <Popup
      v-model="showVisitTime"
      round
      position="bottom"
      class="timeFilter px-16px pt-20px"
      :close-on-click-overlay="false"
    >
      <div class="title flex items-center mb-24px" @click="colse">
        <Icon name="arrow-left" class="pr-12px"></Icon>
        <span>返回筛选</span>
      </div>
      <div>
        <div>
          <slot></slot>
        </div>
        <div class="lable mb-12px flex items-center justify-between">
          <span>时间选择（单选）</span>
          <span class="r_time">{{
            selectedTime.length > 0
              ? selectedTime[0] + "-" + selectedTime[1]
              : ""
          }}</span>
        </div>
        <div class="flex flex-wrap">
          <div
            class="ll_botton mb-28px mr-5px"
            v-for="item in timelist"
            :key="item.value"
            @click="get_defaultDate(item.value)"
            :class="activetime.value === item.value ? 'active' : ''"
          >
            {{ item.lable }}
          </div>
        </div>
        <div class="lable mb-14px">起止日期</div>
        <LlDatePicker
          title="时间筛选"
          @cancel="showVisitTime = false"
          @confirm="confirm"
          type="range"
          :allowSame="true"
          visibleType="full"
          v-model="selectedTime"
          :showBottomArrow="false"
        />
      </div>
      <Button type="primary" class="submit" @click="submit">确认</Button>
    </Popup>
  </div>
</template>

<script>
import moment from "moment";
import { Popup, Icon, Button, Toast } from "vant";
import LlDatePicker from "@/components/ll-calendar";
import {
  getCurrentWeekdays,
  getCurrentMonth,
  getCurrentDays,
} from "@/utils/index.js";
export default {
  components: {
    LlDatePicker,
    Popup,
    Icon,
    Button,
  },
  props: {
    timeType: {
      type: Number, //CurrentDays
      default: 0, //0-本月
    },
  },
  data() {
    return {
      showVisitTime: false,
      timelist: [
        { lable: "本月", value: 0 },
        { lable: "本周", value: 1 },
        { lable: "今日", value: 2 },
        { lable: "自定义", value: 3 },
      ],
      selectedTime: [],
      activetime: {},
    };
  },
  mounted() {
    this.get_defaultDate(this.timeType);
  },
  methods: {
    get_defaultDate(type) {
      switch (type) {
        case 0:
          this.selectedTime = getCurrentMonth();
          break;
        case 1:
          this.selectedTime = getCurrentWeekdays();
          break;
        case 2:
          this.selectedTime = getCurrentDays();
          break;
        case 3:
          this.selectedTime = [];
          break;
        default:
          this.selectedTime = [];
      }
      this.activetime = this.timelist[type];
    },
    // 点击返回 关闭日期弹窗
    colse() {
      this.showVisitTime = false;

      this.$emit("closeDate");
      this.get_defaultDate(0);
    },
    // 选择日期
    confirm(val) {
      console.log(val);
      this.selectedTime = [
        moment(val[0]).format("YYYY-MM-DD"),
        moment(val[1]).format("YYYY-MM-DD"),
      ];
      this.activetime = { lable: "自定义", value: 3 };
    },
    // 打开日期
    open(val) {
      if (val && val.showVisitTime) {
        this.activetime = val;
        this.selectedTime = val.showVisitTime;
      } else {
        this.selectedTime = getCurrentMonth();
        this.activetime = { lable: "本月", value: 0 };
      }
      this.showVisitTime = true;
    },
    // 点击确定
    submit() {
      if (this.selectedTime.length > 0) {
        this.activetime.showVisitTime = this.selectedTime;
        this.$emit("submitTime", this.activetime);
        this.showVisitTime = false;
      } else {
        Toast("请选择日期");
      }
    },
  },
};
</script>

<style lang="scss" scopde>
.timeFilter {
  font-family: PingFangSC-Medium, PingFang SC;
  .van-icon {
    height: 17px;
    font-size: 17px;
  }
  .title {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
  }
  .lable {
    height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    .r_time {
      font-size: 10px;
      color: #666666;
      font-weight: 400;
    }
  }
  .ll_botton {
    height: 32px;
    width: 80px;
    background: #f5f5f5;
    border-radius: 16px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    line-height: 32px;
    border: 1px solid #f5f5f5;
  }
  .ll_botton:last-child {
    margin-right: 0;
    width: 87px;
  }
  .active {
    font-weight: 500;
    background-color: rgba(29, 111, 233, 0.1) !important;
    border-radius: 16px;
    border: 1px solid #1d6fe9 !important;
    color: #1d6fe9;
  }
  .submit {
    width: 100%;
    height: 44px;
    background: #1d6fe9;
    border-radius: 10px;
    margin-top: 67px !important;
    margin-bottom: 30px !important;
  }
  // .van-calendar__day--start {
  //   height: 26px;
  //   width: 26px;
  //   border-radius: 50%;
  // }
  // .van-calendar__day--start::before {
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   content: "";
  //   width: 26px;
  //   height: 26px;

  //   z-index: 0;
  //   background: #1d6fe9;
  //   border-radius: 21px;
  // }
  // .van-calendar__day--start::after {
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   content: "";
  //   width: 34px;
  //   height: 34px;
  //   background: #e8f3ff;
  //   z-index: 0;
  // }
}
</style>
